
/* Grafica per la pagina di creazione corso*/


$main-color: #191919;
$white-color: #fff;
$dark-color: #343f46;
$green-color: #52b5bb;
$blue-color: #213a4e;
$yellow-color: #fedf0b;
$font-nexa-regular : "nexa_slab_regularregular", Helvetica, Arial, sans-serif !default;
$font-nexa-heavy : "nexa_slab_heavyregular", Helvetica, Arial, sans-serif !default;
$font-nexa-light : "nexa_slablight", Helvetica, Arial, sans-serif !default;
$font-nexa_slabxbold : "nexa_slabxbold", Helvetica, Arial, sans-serif !default;
$font-nexa_black : "nexa_slab_blackregular", Helvetica, Arial, sans-serif !default;
$font-nexa_book : "nexa_slab_bookregular", Helvetica, Arial, sans-serif !default;


@mixin marginPaddingReset(){
    margin:0px;
    padding:0px;
}

#sez-lezione.creazione {
    
    .content_wrapper {
        background: url("/libs/css/assets/bkg_noise.png") repeat scroll 0 0 white;
    }

    .wrapper_banner {
        background-image: url("/libs/css/assets/noisy_banner.png"), url("/libs/css/assets/gradient_bannerUp_small.png"); 
        background-repeat: repeat, no-repeat;
        background-position: 0 0, center top;
        background-color: #203A4D;
        box-shadow: 0 -3px 2px #333333 inset;
        .row {
            min-height: 290px;
            background-image: none;
        }
        .autore {
            padding: 1.0em 0em;
            a {
                color: $green-color;
                font-style:italic;
            }
        } /* end autore */
        .content_banner {
            color:$white-color;
            padding: 6% 0 3%;
           
            h1 {
                color:$white-color;
                text-transform: uppercase;
                font-size:2.3em;
            }
            h3 {
                font-size:2.1em;
                color:$white-color;
                font-family : $font-nexa-light;
            }
            .button {
                background: none repeat scroll 0 0 #252525;
                border: none;
                box-shadow: none ;
                color: white;
                cursor: pointer;
                display: inline-block;
                font-family: inherit;
                font-size: 14px;
                font-weight: normal;
                line-height: 2;
                margin: 0em;
                padding: 0.5em 0.8em;
                position: relative;
                text-align: center;
                text-decoration: none;
                text-transform: uppercase;
                width: auto;
                img {padding-right:5px;}
            }

            .sez-banner {
                .board {
                    text-align: right;
                    img {
                        border: 3px solid $white-color;
                    }
                }
            }
            
        }/*end content_banner*/
        
    } /* end wrapper_banner*/
    
    
    
    /* Begin stili per apertura e chiusura dei div con +/- */
    .item_container {
        position: relative;
        background: #203A4D;
        margin-bottom: 0.5em;
        
        .icon_minus {background: url("/libs/css/assets/icon_minus_w.png") no-repeat; width:12px; height:12px; }
        .icon_plus {background: url("/libs/css/assets/icon_plus_w.png") no-repeat; width:12px; height:12px; }

        .item_content {
            background: white;
            display: none;
            padding:1.0em 2.0em;
        }
        .item_button {
            width: auto;
            height:3em;
            line-height:3em;
            padding:0 1.0em;
            vertical-align: middle;
            cursor: pointer;
            overflow: hidden;
            color: $white-color;
            text-transform : uppercase;
            font-weight: bold;
            font-size: 1.4em;
        }
        .item_icon {
            position: absolute;
            cursor: pointer;
            z-index:1000;
            top:20px;
            right:2%;
        }
    }/*end item_container */
        
    
    
.create_lesson {
        margin-top:0.5em;
        /* ui-tabs-active {background: #203A4D; font-weight: bold; margin-bottom : 0px; padding-bottom : 0px;}*/
        .tabs_create {
            padding:0px;
            background: none; 
            border: none;
            ul.tabStyle {
                text-transform: uppercase;
                border: 0;
                padding: 0;
                margin: 0;
                li {
                    width: 194px;
                    height:184px;
                    /*line-height:8em;*/
                    border: none;
                    border-radius:0px;
                    text-align: center;
                    padding-top:0px;
                    white-space: normal;
                    background-color: $green-color ;
                    float: left;
                    margin:0 2px;
                    position: relative;
                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        color: $white-color;
                        padding: 6.0em 1.0em;
                        h5 {
                            color:$white-color;
                            font-size: 1.4em;
                            font-family: $font-nexa-regular;
                            line-height: 1.4em;
                        }
                    span {
                        color: $white-color;
                        left: 23%;
                        line-height: 1.4em;
                        opacity: 0.1;
                        position: absolute;
                        top: 0;
                        padding : 0;
                        font-size: 10em;
                        font-weight : bold;
                        &.uno {left: 35%;}
                   }
                }
                &.active{
                    background-color: #203a4d ;
                }
              }
            } /* end ul.tabStyle */
         } /*end tabs_create*/ 
         .tabs_content {
            padding: 1em 0.2em;
            .btn_next {
                background: none repeat scroll 0 0 #10212e;
                text-transform: uppercase;
                font-weight: bold;
                text-align: right;
                height: 4.5em;
                line-height: 4.5em;
            }
            .goto {
                padding : 0.8em;  
                color : $white-color;
                font-size:1.75em;
                img {margin-left: 1.0em;}
            }
            .crea_pubblica{
                padding : 0.8em;                        
                color : $white-color;
            }
            .item_container {
                background:$blue-color;
            }
            p {
                line-height: 1.2em;
                font-size: 1.2em;
                color: $blue-color;
            }
            label {
                color : $blue-color !important;
                font-size: 1.4em;
                padding-left: 0.5em;
            }
            .field {
                clear: both;
                position: relative;
                a.alert {
                    color: #52B5BB !important;
                    font-size: 2.0em;
                    font-family: $font-nexa_book;
                    font-weight: bold;
                    color: $green-color;
                    position: absolute;
                    right: -15px;
                    top: 45px;
                    cursor: pointer;
                    &:hover {
                        .message {
                         /*   
                            display: block;
                            color: #fff;
                            font-family: $font-nexa_slabxbold;
                            font-size: 0.6em;
                            position: absolute;
                            top: -18px;
                            right:0px;
                            background: $blue-color;
                            border: 2px solid #556878;
                            border-radius: 3px 3px 3px 3px;
                            padding: 0.6em;
                            */
                            display: block;
                            color: $main-color;
                            font-size: 0.4em;
                            position: absolute;
                            top: -18px;
                            right:0px;
                            background: $white-color;
                            border-radius: 3px 3px 3px 3px;
                            padding: 1.0em;
                            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                            z-index: 1;
                        }
                    }
                    .message {
                        display: none;
                    }  
                }
            }
            .select_categoria {
                float: left;
                width:50%
            }
            .insert_categoria {
                float: left; 
                width:49% ;
                margin-left: 1%;
            }
            textarea {
                resize: none;
                font-size: 1.4em;
                background : #f2f2f2;
                height: 100px;
                color : #b7b7b7;
                border: none;
            }
            input {
                font-size: 1.4em;
                &[type="text"] {
                    background : #f2f2f2;
                    height: 65px;
                    color : #b7b7b7;
                    border: none;
                }
                &.btn[type="button"] {
                    background: $blue-color ;
                    border: medium none;
                    box-shadow: none;
                    color: #FFFFFF;
                    cursor: pointer;
                    display: inline-block;
                    font-weight: normal;
                    font-size:1.2em;
                    line-height: 2;
                    margin: -1.0em 0em 1em 0;
                    text-align: center;
                    text-decoration: none;
                    text-transform: lowercase;
                    float: right;
                    padding: 0.1em 1.5em;
                }
                &.salva_dati[type="button"] { 
                    background: $blue-color ;
                    border: medium none;
                    box-shadow: none;
                    color: #FFFFFF;
                    cursor: pointer;
                    display: inline-block;
                    font-weight: normal;
                    font-size:1.2em;
                    line-height: 2;
                    margin: 2em 0;
                    text-align: center;
                    text-decoration: none;
                    text-transform: lowercase;
                    float: none;
                    padding: 0.1em 1.5em;
                }
                &.radio[type="radio"] {
                    float: left;
                }
            } /* end input */
            .item_radio {
                display: inline-block;
                label {float: left;}
            }
            .submit_info {
                width: 100%;
                margin : 0 auto;
                text-align: center;
            }
            .radio_section {  //customizza i radio button 
                .styled-radio {margin-top:1.0em;}
                input[type="radio"] {
                    /*display: none;*/
                    margin:10px;
                    position: absolute;
                    z-index: -1; 
                }

                input.blue[type="radio"] + label {
                    display: inline-block;
                    margin: -2px;
                    padding: 2px 30px;
                    background: url("/libs/css/assets/input_radio_unchecked_grey.png") no-repeat;
                    width: 25%;
                    color: $green-color !important;
                    font-family: $font-nexa-light;
                }

                input.blue[type="radio"]:checked + label {
                   background: url("/libs/css/assets/input_radio_checked_blue.png") no-repeat;
                   color: $blue-color !important;
                }

                input.yellow[type="radio"] + label {
                    display: inline-block;
                    margin: -2px;
                    padding: 2px 30px;
                    background: url("/libs/css/assets/input_radio_unchecked_grey.png") no-repeat;
                    width: 25%;
                    color: $blue-color !important;
                    font-family: $font-nexa_slabxbold;
                }
                input.yellow[type="radio"]:checked + label {
                   background: url("/libs/css/assets/input_radio_checked_yellow.png") no-repeat;
                   color: $blue-color !important;
                }

            }/*end radio_section*/

            .styled-select { /* customizza le select */
                width: 100%;
                height: 65px;
                overflow: hidden;
                background: url("/libs/css/assets/select_new_arrow.png") no-repeat right #F2F2F2;
                outline: none;
                select {
                    background: transparent;
                    width: 105%;
                    padding: 1em 0.2em 0.2em 0.5em;
                    line-height: 1;
                    border: 0;
                    border-radius: 0;
                    height: 65px;
                    -webkit-appearance: none;
                    color : $green-color;    
                    font-size: 1.4em;
                    font-family: $font-nexa-regular;
                }
            }/*end styled-select*/
            .items_toDisplay_requisito {
                cursor: move;
            }
            .items_toDisplay_obiettivo {
                cursor: move;
            }
            .items_toDisplay_aspettativa {
                cursor: move;
            }
            .items_toDisplay_target {
                cursor: move;
            }
            .item_added {
                background: #f2f2f2;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
                border: medium none;
                color: $blue-color;
                clear: both;
                font-size: 1.4em;
                height: 65px;
                line-height: 65px;
                margin: 0.5em 0;
                padding: 0 0.5em;
                .name_item_added {
                    width: 93%;
                    float: left;
                    background: transparent;
                    box-shadow: none;
                    margin-bottom: 0;
                }
                .btn_delete {
                   // background: url("../../libs/css/assets/icon_edit_suite.png") no-repeat scroll -57px 0px transparent;
                    background: none;
                    border: medium none;
                    display: inline-block;
                    height: 31px;
                    width: 31px;
                    margin-top:0.5em;
                    float: right;
                    cursor: pointer;
                    outline: none;
                }
                .btn_ordina {
                  //  background: url("../../libs/css/assets/icon_edit_suite.png") no-repeat scroll -28px 0px transparent;
                    background: none;
                    border: medium none;
                    display: inline-block;
                    height: 31px;
                    width: 31px;
                    margin-top:0.5em;
                    float: left;
                    cursor: move;
                    outline: none;
                }
                .btn_modifica {
                 //   background: url("../../libs/css/assets/icon_edit_suite.png") no-repeat scroll 1px 0px transparent;
                    background: none;
                    border: medium none;
                    display: inline-block;
                    height: 31px;
                    width: 31px;
                    margin-top:0.5em;
                    float: right;
                    cursor: pointer;
                    outline: none;
                }
                &:hover {
                   .btn_delete {
                        background: url("/libs/css/assets/icon_edit_suite.png") no-repeat scroll -57px 0px transparent;
                        &:hover {
                            background-position: -57px -31px;
                        }
                    }
                   .btn_ordina {
                        background: url("/libs/css/assets/icon_edit_suite.png") no-repeat scroll -28px 0px transparent;
                        &:hover {
                            background-position: -28px -31px;
                        }
                    }
                   .btn_modifica {
                        background: url("/libs/css/assets/icon_edit_suite.png") no-repeat scroll 1px 0px transparent;
                        &:hover {
                            background-position: 1px -31px;
                        }
                    }
                }
            }/* end item_added */
            .alert_note {
                position: relative;
                margin-left: 1.5em;
                margin-top: 2.0em;
                font-size:0.8em;
                span {
                    position: absolute;
                    left: -20px ;
                    top: 2px;
                    color: $green-color;
                    font-size: 2.6em;
                    font-family: $font-nexa_slabxbold;
                }
            }/*end alert_note*/
            &.guida{
               h5 {
                   padding-left: inherit;
                   padding-right: inherit;
                   &.title {
                       color : $green-color !important;
                       font-size: 1.6em;
                   }
                   &.subtitle {
                       color : $blue-color !important;
                       font-size: 1.6em;
                       font-family: $font-nexa-regular;
                   }
               }
               .guida_container {
                    background: $green-color;
                    margin-bottom: 1.0em;
                    .guida_title {
                        width: auto;
                        height:3em;
                        line-height:3em;
                        padding:0 1.0em;
                        vertical-align: middle;
                        overflow: hidden;
                        color: $white-color;
                        text-transform : uppercase;
                        font-weight: bold;
                        font-size: 1.4em;
                    }
                   .guida_content {
                        background: white;
                        padding:1.0em;
                        p, span {
                            padding: inherit;
                            font-size:1.1em;
                        }
                        ul.guida_lista {
                            padding: inherit;
                            p {
                                padding-top: 0.75em;
                                padding-left: 0;
                                margin-left: -1.5em;
                            }
                            li {
                                background: url("/libs/css/assets/create_li_menu_leaf_green.png") no-repeat scroll 0 6px transparent;
                                list-style: none outside none;
                                padding-left: 1.6em; 
                                margin-left: 0.0em;
                                margin-bottom : 2.5em;
                                &.bullet_blue {
                                    background: url("/libs/css/assets/create_li_menu_leaf_blue.png") no-repeat scroll 0 6px transparent;
                                }
                                ul.guida_lista_interna {
                                    margin-bottom: 1.0em;
                                    li {
                                        margin-bottom: 0;
                                    }
                                    p {
                                        padding-left: inherit;
                                        padding-top: inherit;
                                        margin-left: inherit;
                                        margin-bottom : 0;
                                        padding-bottom: inherit;
                                    }
                                }
                            }
                            .criteri {
                                margin-left:1.25em;
                                p {
                                    margin-left:0;
                                    margin-bottom : 0;
                                }
                                span {
                                    margin-left: -0.5em;
                                }
                            }
                        }
                    } /*end guida_content*/

                }/*end guida_container */

           }/*end guida*/
           &.fondamentali {
               .item_added .btn_modifica {display: none;}
               .my_image {
                    margin: 0 0 1em;
                    padding: 1.5em 0em;
                    background: #F2F2F2;
                    width: 100%;
                    text-align: center;
                    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                    img {
                        height: auto;
                        border: 3px solid $white-color;
                    }
                }
                .my_video {
                    margin: 0 0 1em;
                    background: url("/libs/css/assets/caricamento_video.png")no-repeat center center $main-color;
                    height: 455px;
                    width: 100%;
                }
                .note {
                    line-height: 30px;
                    height: 30px;
                    width: 100%;
                    font-family: $font-nexa-heavy;
                    background: #F2F2F2;
                    padding: 0 0.5em;
                }
                .upload_file {
                    background: url("/libs/css/assets/btn_browse.png") no-repeat scroll 0 0 transparent !important;
                    float: left;
                    height: 26px;
                    width: 91px;
                    float: right;
                    margin-top:0.5em;
                    .load {
                        display: block;
                        height: 26px;
                        opacity: 0 !important;
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";	/*Hack per IE8*/
                        filter: alpha(opacity=0);	/*Hack per IE7*/
                        width: 91px;
                        cursor: pointer;
                    }
                }
           } /* end fondamentali*/ 
           &.settaggio {
                .radio_section {margin-bottom: 2.0em;}
                .contenuto_radio2 {display: none;}
                .autori {
                    input[type="radio"] + label {
                        width: 50%;
                    }
                    input.blue[type="radio"] + label {
                        display: inline-block;
                        margin: -2px;
                        padding: 2px 30px;
                        background: url("/libs/css/assets/input_radio_unchecked_white.png") no-repeat;
                        color: $blue-color !important;
                        font-family: $font-nexa_slabxbold;
                    }
                    input.blue[type="radio"]:checked + label {
                        background: url("/libs/css/assets/input_radio_checked_blue.png") no-repeat;
                        color: $blue-color;
                     }
                    .all_coautori {
                        @include marginPaddingReset();
                        .item_added {
                            background: $yellow-color;
                            color: $blue-color;
                            font-size: 1.4em;
                            font-family: $font-nexa_slabxbold;
                            height: 65px;
                            line-height:65px;
                            cursor: move;
                        }
                    }/*end all_coautori*/
                    .all_autori {
                        @include marginPaddingReset();
                        .item_added {
                            background: $yellow-color;
                            color: $blue-color;
                            font-size: 1.4em;
                            font-family: $font-nexa_slabxbold;
                            height: 65px;
                            line-height:65px;
                            cursor: move;
                        }
                        .current_autore {
                            display: none;
                            font-size: 1.4em;
                            margin-top: 1.0em;
                        }
                    }/*end all_autori*/
                    .all_coautori_right {
                        @include marginPaddingReset();
                        .item_added {
                            background: $yellow-color;
                            color: $blue-color;
                            font-size: 1.4em;
                            font-family: $font-nexa_slabxbold;
                            height: 65px;
                            line-height:65px;
                            cursor: move;
                        }
                    }/*end all_coautori_right*/
                } /* end autori*/
                .item_container_inside {
                    width: 100%;
                    color: $blue-color;
                    & > div {
                        padding: 0.7em;
                        margin: 1.5em 0em;
                    }
                }
                .item_button_inside {
                    cursor: pointer;
                    width: 42%;
                    background: $yellow-color ;
                    font-size: 1.4em;
                }
                .icon_plus_inside {
                    background: url("/libs/css/assets/icon_plus_b.png") no-repeat scroll 0 0 transparent;
                    height: 12px;
                    width: 12px;
                    float: right;
                }
                .item_content_inside {
                    display: none;
                    width: 100%;
                    background: $yellow-color;
                    overflow: hidden;
                    span {
                        font-size: 1.4em;
                    }
                    .title {
                        padding: 0.5em 0;
                        font-size: 1.4em;
                    }
                    .my_content {
                        padding: 1.0em 0em;
                    }
                    .btn {
                        float: left;
                        margin-left: 0.5em;
                        margin-top: 0;
                    }
                    input#modifica_coautore {
                        display: none;
                    }
                    input#modifica_coautore_right {
                        display: none;
                    }
                    input#modifica_autore {
                        display: none;
                    }
                    .info_coautore {
                        overflow: hidden;
                    }
                    .info_autore {
                        overflow: hidden;
                    }
                    #annulla_autore {display: none;}
                    .photo_section {
                        width: 100%;
                        overflow: hidden;
                        margin: 0 0 1em;
                        .avatar {
                            width: 165px;
                            img {
                                background: $white-color;
                                height: auto;
                                width: 100%;
                                border: 5px solid $white-color;
                                border-bottom: 30px solid $white-color;
                            }
                        }
                        .text {
                            width: 80%;
                            .note {
                                line-height: 30px;
                                height: 30px;
                                font-family: $font-nexa-heavy;
                                background: #F2F2F2;
                                padding: 0 0.5em;
                            }
                            .upload_file {
                                background: url("/libs/css/assets/btn_browse.png") no-repeat scroll 0 0 transparent !important;
                                float: left;
                                height: 26px;
                                width: 91px;
                                float: right;
                                margin-top:0.5em;
                                .load {
                                    display: block;
                                    height: 26px;
                                    opacity: 0 !important;
                                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";	/*Hack per IE8*/
                                    filter: alpha(opacity=0);	/*Hack per IE7*/
                                    width: 91px;
                                    cursor: pointer;
                                }
                            }
                        }
                    } /*end photo_section*/
                    .life_section{
                        margin: 0 0 1em; 
                        textarea {
                            background: none repeat scroll 0 0 #F2F2F2;
                            border: medium none;
                            color: #B7B7B7;
                            font-size: 1.4em;
                            height: 100px;
                            resize: none;
                        }
                    }
                    .alert_note {
                        margin-left: 1.5em;
                        margin-top: 2.0em;
                        font-size:0.8em;
                        span {
                            color: $green-color;
                            font-size: 2.6em;
                            font-family: $font-nexa_slabxbold;
                        }
                        p {
                            margin: 0;
                            padding-top: 0.5em;
                        }
                    }/*end alert_note*/
                    .btn_area {
                        overflow: hidden;
                        display: block;
                    }
                    &.info_autore {
                        display : block;
                    }
                } /* end item content inside*/
                .items_toDisplay_coautore {
                    input.name_item_added[type="text"] {
                        color: $main-color;
                        font-weight: normal;
                        font-size: 1.0em;
                    }
                    .item_added {
                        cursor: default !important;
                    }
                }
                .items_toDisplay_coautore_right {
                    input.name_item_added[type="text"] {
                        color: $main-color;
                        font-weight: normal;
                        font-size: 1.0em;
                    }
                    .item_added {
                        cursor: default !important;
                    }
                }
                .items_toDisplay_autore {
                    input.name_item_added[type="text"] {
                        color: $main-color;
                        font-weight: normal;
                        font-size: 1.0em;
                    }
                    .item_added {
                        cursor: default !important;
                    }
                }
                .danger_zone {
                    .title {
                        color: $blue-color !important;
                        font-family: $font-nexa_black;
                        font-size: 1.6em;
                    }
                    p {
                        margin: 1.25em 0;
                    }
                    input.remove[type="button"] {
                        background: #eb2c31;
                        border: medium none;
                        box-shadow: none;
                        color: #FFFFFF;
                        cursor: pointer;
                        display: inline-block;
                        font-size: 1.2em;
                        font-weight: normal;
                        line-height: 2;
                        margin: 0 0 1em 0;
                        padding: 0.2em 1.5em;
                        text-align: center;
                        text-decoration: none;
                        text-transform: lowercase;
                        border-radius: 3px 3px 3px 3px;
                        &:hover {
                            background: #eb0006;
                        }
                    }
                } /* end danger_zone*/
           } /*end settaggio*/

        } /*end tabs_content*/    

    } /*end create_lesson*/
  
}/* end #sez-lezione.creazione */


 